import React, { useState } from 'react';
import { Checkbox, Row, Col, Menu, Button } from 'antd';
import styles from './index.less';
//执行按钮loading
const ExecuteBtn = ({ executeProcess, item }) => {
  const [loading, setLoading] = useState(false);
  return (
    <Button
      className={styles['execute']}
      onClick={async () => {
        await setLoading(true);
        let res = await executeProcess({ flowId: item.id });
        await setLoading(false);
      }}
      loading={loading}
    >
      执行
    </Button>
  );
};
//关联流程下拉菜单
const FlowMenu = ({ flowList, setVisible, selectionsProps, executeProcessFn, save }) => {
  const { selected, isSelected, toggle } = selectionsProps;

  return (
    <div className={styles['flow-menu-wrap']}>
      {flowList[0] && <div className={styles['title']}>请勾选活动流程</div>}
      <Menu className={styles['flow-menu']}>
        {flowList[0] &&
          flowList.map(item => {
            return (
              <Menu.Item key={item.id}>
                <Row>
                  <Col span={20} className={styles['checked-box']}>
                    <Checkbox checked={isSelected(item.id)} onClick={() => toggle(item.id)}>
                      {item.name}
                    </Checkbox>
                  </Col>
                  <Col span={4} className={styles['perform']}>
                    <ExecuteBtn item={item} executeProcess={executeProcessFn} />
                  </Col>
                </Row>
              </Menu.Item>
            );
          })}
        {!flowList[0] && (
          <Menu.Item key={'none'} className={styles['no-data']}>
            {'暂无流程'}
          </Menu.Item>
        )}
      </Menu>
      {flowList[0] && (
        <div className={styles['flow-save']}>
          <Button
            onClick={() => {
              setVisible(false);
              save({ flows: selected });
            }}
          >
            保存配置
          </Button>
        </div>
      )}
    </div>
  );
};
export default FlowMenu;
